<template>
  <el-dialog :title="title" :visible.sync="show" :before-close="handleClose" center width="560px">
    <div>
        <div class='item'>
            <label for="">律师姓名</label>
            <div>{{lawyer.name}}</div>
        </div>
        <div class='item'>
            <label for="">身份证号</label>
            <div>{{lawyer.idCardNo}}</div>
        </div>
        <div class='item'>
            <label for="">性别</label>
            <div>{{lawyer.gender == 'male' ? '男' : '女'}}</div>
        </div>
        <div class='item'>
            <label for="">常用邮箱</label>
            <div>{{lawyer.email}}</div>
        </div>
        <div class='item'>
            <label for="">执业证号</label>
            <div>{{lawyer.licenseNo}}</div>
        </div>
        <div class='item'>
            <label for="">所在地区</label>
            <div>{{lawyer.provinceName}} {{lawyer.cityName}}</div>
        </div>
        <div class='item'>
            <label for="">擅长专长</label>
            <div>{{lawyer.skillFirstName}} {{lawyer.skillSecondName}} {{lawyer.skillThirdName}}</div>
        </div>
        <div class='item'>
            <label for="">执业律所</label>
            <div>{{lawyer.lawfirmName}}</div>
        </div>
        <div class='item'>
            <label for="">详细地址</label>
            <div>{{lawyer.address}}</div>
        </div>
        <div class='item'>
            <label for="">图片信息</label>
            <div class='img-group'>
                <figure>
                    <img @click="showImg(lawyer.idCardFront)" :src="lawyer.idCardFront" alt="">
                    <figcaption>身份证正面</figcaption>
                </figure>
                <figure>
                    <img @click="showImg(lawyer.idCardBack)" :src="lawyer.idCardBack" alt="">
                    <figcaption>身份证背面</figcaption>
                </figure>
                <figure>
                    <img @click="showImg(lawyer.certificatePic)" :src="lawyer.certificatePic" alt="">
                    <figcaption>执业照</figcaption>
                </figure>
            </div>
        </div>
     
        <div v-if="state == 'apply'" class='footer'>
          <el-button @click="passBtnClickEvent" type="primary">通过</el-button>
          <el-button @click='refuseBtnClickEvent' type="danger">拒绝</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
        <div v-else class='footer'>
          <el-button @click="handleClose">好的</el-button>
        </div>
        <div v-show="isShowImg" @click="isShowImg=false" class="show_img">
          <img :src="showImgUrl" alt="">
        </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "AuditDialog",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    auditId: {
      type: null,
      default: ''
    },
    state: {
        type: null,
        default: 'apply'
    }
  },
  data() {
    return {
      lawyer: {},
      isShowImg: false,
      showImgUrl: null,
    };
  },
  watch: {
    auditId: function() {
      this.getAuditDetail();
    }
  },
  created() {
    console.log("show:::", this.show);
    console.log('auditId', this.auditId);
    if(!this._utils.isEmpty(this.auditId)) {
      this.getAuditDetail();
    }
  },
  methods: {
    showImg(imgUrl) {
      if(this._utils.isEmpty(imgUrl)) {
        return;
      }
      this.isShowImg = true;
      this.showImgUrl = imgUrl;
    },
    //init() {}
    // 通过按钮点击事件
    passBtnClickEvent() {
      this.auditLawyer({
        id: this.lawyer.id,
        state: 'passed '
      }, '已通过');
    },
    // 拒绝按钮点击事件
    refuseBtnClickEvent() {
      this.auditLawyer({
        id: this.lawyer.id,
        state: 'refused'
      }, '已拒绝');
    },

    // 律师审核
    auditLawyer(params, msg) {
      this.$store.dispatch('LAWYER_AUDIT', params).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success(msg);
          this.handleClose('getList')
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 获取审核详情
    getAuditDetail() {
      this.$store.dispatch('GET_AUDIT_DETAIL', {
        id: this.auditId
      }).then(res => {
        if(res.data.retCode == 0) {
          console.log('addCase:::', res);
          this.lawyer = res.data.data;
          // this.$message.success('新增成功！');
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
   
    // dialog关闭前处理
    handleClose(isGetList) {
    //   this.init();
      this.$emit("close", isGetList);
    }

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .item{
   display: flex;
   line-height: 1.8;
   margin-bottom: 20px;
   font-size: 14px;
   color: #333;
 }
 .item > label{
   width: 90px;
   text-align: right;
   padding-right: 20px;
   box-sizing: border-box;
   flex-shrink: 0;
   color: #666;
 }
 .img-group{
   display: flex;
 }
 .img-group figure{
   margin-right: 20px;
 }
 .img-group figcaption{
   font-size: 12px;
   color: #999;
 }
 .img-group img{
   width: 120px;
   height: 90px;
   border-radius: 10px;
 }
 .footer{
   padding: 20px 0;
   display: flex;
   justify-content: center;
   align-content: center;
 }

 .show_img{
   position: fixed;
   z-index: 10000;
   background-color: rgba(0, 0, 0, 0.2);
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .show_img img{
   max-width: 800px;
   max-height: 600px;
   object-fit: contain;
 }
</style>
